import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';

// createContext创建一个context，提供Provider和Consumer。Provider主要将context内容暴露出来，Consumer可以拿到对应的context的Provider暴露的内容
const AppContext = createContext(null);

// useContext主要是实现跨层级传递数据，实现数据共享，需要配合createContext使用；
// react源码useContext并没有什么功能，只是把传入的context的_currentValue返回了；
// useContext原理类似于观察者模式，Provider是被观察者，Consumer和useContext是观察者。当Provider上的值反正变化的时候，观察者是可以观察到的，从同步信息到组件；
function useContext(context) {
  return context._currentValue;
}

function Child() {
  const { count, setCount } = useContext(AppContext);

  return (
    <div>
      <AppContext.Consumer>
        {(v) => {
          return (
            <div>
              <h2>child: {v.count}</h2>
              <button onClick={() => v.setCount((c) => ++c)}>+</button>
            </div>
          );
        }}
      </AppContext.Consumer>
      <h2>{count}</h2>
      <button onClick={() => setCount((c) => ++c)}>+</button>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <AppContext.Provider value={{ count, setCount }}>
        <h1>{count}</h1>
        <Child />
      </AppContext.Provider>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
